<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>多快好省，购物上京东！</title>
    <link rel="shortcut icon" href="images/京东.png">
</head>
<body>
    <header>
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>
                <p>打开京东App购物</p>
                新人领188元红包</p>
            </li>
            <li>立即打开</li>
        </ul>
    </header>
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
            <a href="https://m.jd.com/#sksLeft=0&st=0">欧普照明</a>
        </div>
        <div class="search-login">登录</div>
    </div>
    <div class="search-bg"></div>
    <div class="mainContent">
        <div class="slider">
            <img src="upload/轮播图1.jpg.dpg" alt="">
        </div>
        <div class="brand">
            <a href="#">
                <img src="upload/超级品牌日1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/超级品牌日2.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/超级品牌日3.dpg" alt="">
            </a>
        </div>
        <nav>
            <a href="https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html">
                <img src="upload/导航栏1.png" alt="">
                <span>京东超市</span>
            </a>
            <a href="https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html">
                <img src="upload/导航栏2.png" alt="">
                <span>数码电器</span>
            </a>
            <a href="https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html">
                <img src="upload/导航栏3.png" alt="">
                <span>京东服饰</span>
            </a>
            <a href="https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html">
                <img src="upload/导航栏4.png" alt="">
                <span>京东生鲜</span>
            </a>
            <a href="https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html">
                <img src="upload/导航栏5.png" alt="">
                <span>京东到家</span>
            </a>
            <a href="https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html">
                <img src="upload/导航栏6.png" alt="">
                <span>充值缴费</span>
            </a>
            <a href="https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html">
                <img src="upload/导航栏7.png" alt="">
                <span>9.9元拼</span>
            </a>
            <a href="https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html">
                <img src="upload/导航栏8.png" alt="">
                <span>领券</span>
            </a>
            <a href="https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html">
                <img src="upload/导航栏9.png" alt="">
                <span>赚钱</span>
            </a>
            <a href="https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html">
                <img src="upload/导航栏10.png" alt="">
                <span>PLUS会员</span>
            </a>
        </nav>
        <div class="defend">
            <a href="#">
                <img src="upload/抗击疫情.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/宅家购物.dpg" alt="">
            </a>
        </div>
        <div class="second">
            <div class="title">
                <div class="jdms"></div>
                <a href="#">
                    更多秒杀
                    <i>&#xe618;</i>
                </a>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <a href="#">
                            <img src="upload/二轮播.dpg" alt="">
                        </a>
                        <span class="first">
                            <em>￥</em>
                            <span>3999</span>
                        </span>
                        <span class="seconds">
                            <em>￥</em>
                            <span>5499</span>
                            <hr>
                        </span>
                    </li> 
                    <li> 
                        <a href="#">
                            <img src="upload/二轮播1.dpg" alt="">
                        </a>
                        <span class="first">
                            <em>￥</em>
                            <span>39</span>
                        </span>
                        <span class="seconds">
                            <em>￥</em>
                            <span>118</span>
                            <hr>
                        </span>
                    </li>  
                    <li>
                        <a href="#">
                            <img src="upload/二轮播2.dpg" alt="">
                        </a>
                        <span class="first">
                            <em>￥</em>
                            <span>49.8</span>
                        </span>
                        <span class="seconds">
                            <em>￥</em>
                            <span>79</span>
                            <hr>
                        </span>
                    </li>
                    <li>
                        <a href="#">
                            <img src="upload/二轮播3.dpg" alt="">
                        </a>
                        <span class="first">
                            <em>￥</em>
                            <span>1199</span>
                        </span>
                        <span class="seconds">
                            <em>￥</em>
                            <span>1499</span>
                            <hr>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="enjoy">
            <a href="#">
                <img src="upload/新人专享1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/新人专享2.dpg" alt="">
            </a>
        </div>
        <div class="love">
            <img src="upload/爱意之礼.webp" alt="">
        </div>
        <div class="present">
            <a href="#">
                <img src="upload/心在一起1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/心在一起2.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/心在一起3.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/心在一起4.dpg" alt="">
            </a>
        </div>
        <div class="east">
            <div class="title">
                <img src="upload/东家小院.dpg" alt="">
            </div>
            <div class="content">
                <div class="top">
                    <a href="#" style="border-radius: 10px 0 0 0;">
                        <span style="background: -webkit-linear-gradient(left,#45CAFF,#1471FB);  background: linear-gradient(90deg, #45CAFF,#1471FB); -webkit-background-clip:text; color: transparent;">欢聚餐厅</span>
                        <p>汇聚一堂，共享美食</p>
                        <div class="pic">
                            <img src="upload/欢聚一堂1.dpg" alt="">
                            <img src="upload/欢聚一堂2.dpg" alt="">
                        </div>
                    </a>
                    <a href="#">
                        <span style="background: -webkit-linear-gradient(left,#45CAFF,#1471FB);  background: linear-gradient(90deg, #45CAFF,#1471FB); -webkit-background-clip:text; color: transparent;">女王必买</span>
                        <p>一站备齐好物</p>
                        <div class="pic">
                            <img src="upload/女王必买1.dpg" alt="">
                            <img src="upload/女王必买2.dpg" alt="">
                        </div>
                    </a>
                </div>
                <div class="smain">
                    <a href="#">
                        <span>家居能手</span>
                        <p>爱家爱生活</p>
                        <img src="upload/家居1.dpg" alt="">
                    </a>
                    <a href="#">
                        <span>家居收纳</span>
                        <p>小确幸</p>
                        <img src="upload/家居2.dpg" alt="">
                    </a>
                    <a href="#">
                        <span>翡翠吊坠</span>
                        <p>甄选翡翠</p>
                        <img src="upload/家居3.dpg" alt="">
                    </a>
                    <a href="#">
                        <span>运动不止</span>
                        <p>热恋不止</p>
                        <img src="upload/家居4.dpg" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="everyday">
            <div class="title">
                <img src="upload/每日逛.dpg" alt="">
            </div>
            <div class="content">
                <a href="#">
                        <span style=" background: -webkit-linear-gradient(left,#FF2A2A,#F139D2);                                                 background: linear-gradient(90deg, #FF2A2A,#F139D2);                                                 -webkit-background-clip: text;                                                 color: transparent; border-radius: 10px 0 0 0;">免息星球</span>
                        <p>白条免息购</p>
                        <img src="upload/每日逛1.dpg" alt="">
                </a>
                <a href="#">
                        <span style=" background: -webkit-linear-gradient(left,#FE8537,#F02B2B);                                                 background: linear-gradient(90deg, #FE8537,#F02B2B);                                                 -webkit-background-clip: text;                                                 color: transparent;">每日特价</span>
                        <p>9块9疯抢</p>
                        <img src="upload/每日逛2.dpg" alt="">
                </a>
                <a href="#">
                        <span style=" background: -webkit-linear-gradient(left,#FF765C,#FF23B3);                                                 background: linear-gradient(90deg, #FF765C,#FF23B3);                                                 -webkit-background-clip: text;                                                 color: transparent;">品牌闪购</span>
                        <p>汇大牌好价</p>
                        <img src="upload/每日逛3.dpg" alt="">
                </a>
                <a href="#">
                        <span style=" background: -webkit-linear-gradient(left,#FF2A00,#FF00AF);                                                 background: linear-gradient(90deg, #FF2A00,#FF00AF);                                                 -webkit-background-clip: text;                                                 color: transparent;">京东直播</span>
                        <p>边看边买</p>
                        <img src="upload/每日逛4.dpg" alt="">
                </a>
                <a href="#">
                        <span style=" background: -webkit-linear-gradient(left,#D400FF,#FF320A);                                                 background: linear-gradient(90deg, #D400FF,#FF320A);                                                 -webkit-background-clip: text;                                                 color: transparent;">排行榜</span>
                        <p>销量排行推荐</p>
                        <img src="upload/每日逛5.dpg" alt="">
                </a>
                <a href="#">
                        <span style=" background: -webkit-linear-gradient(left,#00C2AB,#3E94FF);                                                 background: linear-gradient(90deg, #00C2AB,#3E94FF);                                                 -webkit-background-clip: text;                                                 color: transparent;">拍拍好物</span>
                        <p>iphone5折起</p>
                        <img src="upload/每日逛6.dpg" alt="">
                </a>
                <a href="#">
                        <span style=" background: -webkit-linear-gradient(left,#FF765C,#FF23B3);                                                 background: linear-gradient(90deg, #FF765C,#FF23B3);                                                 -webkit-background-clip: text;                                                 color: transparent;">新品首发</span>
                        <p>京东小魔方</p>
                        <img src="upload/每日逛7.dpg" alt="">
                </a>
                <a href="#">
                        <span style=" background: -webkit-linear-gradient(left,#2AD396,#85BB1F);                                                 background: linear-gradient(90deg, #2AD396,#85BB1F);                                                 -webkit-background-clip: text;                                                 color: transparent;">发现好货</span>
                        <p>教你买买买</p>
                        <img src="upload/每日逛8.dpg" alt="">
                </a>
            </div>
        </div>
        <div class="recon">
            <div class="title">
                <img src="images/为你推荐.png" alt="">
            </div>
            <div class="content">
                <a href="#">
                    <img src="images/为你推荐1.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
                <a href="#">
                    <img src="images/为你推荐2.webp" alt="">
                    <span class="a">乱七八糟乱贷款利率绿绿绿绿带来了七八糟乱七八糟</span>
                    <span class="b">
                        <em>￥</em>
                        12
                    </span>
                    <button>看相似</button>
                </a>
            </div>
        </div>      
    </div>
    <footer>
        <ul>
            <li>
                <a href="#">登录</a>
            </li>
            <li>
                <a href="#">注册</a>
            </li>
            <li>
                <a href="#">客户服务</a>
            </li>
            <li>
                <a href="#">返回顶部</a>
            </li>
        </ul>
        <div class="content">
            <a href="#">
                <img src="images/底部1.png" alt="">
            </a>
            <a href="#">
                <img src="images/底部2.png" alt="">
            </a>
            <a href="#">
                <img src="images/底部3.png" alt="">
            </a>
        </div>
        <p>Copyright © 2004-2019 京东JD.com 版权所有</p>
    </footer>
    <div class="footer">
        <ul>
            <li>
                <img src="images/tab1.png" alt="">
            </li>
            <li>
                <img src="images/tab2.png" alt="">
            </li>
            <li>
                <img src="images/tab3.png" alt="">
            </li>
            <li>
                <img src="images/tab4.png" alt="">
            </li>
            <li>
                <img src="images/tab5.png" alt="">
            </li>
        </ul>
    </div>

</body>
</html>